<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title></title>
		<link rel="stylesheet" href="./style/style.css" />
	</head>
	<body>
		<!-- 整个页面布局居中 -->
    <div class="page">
      <!-- 头部的logo和搜索等 -->
      <div class="header">
        <!-- logo图片 -->
        <div class="clear txlogo">
          <img class="top_logo" src="img/download.png" alt="" />
        </div>
        <!-- 搜索 -->
        <div class="search clear">
          <div class="web">
            网页
            <i></i>
          </div>
          <input class="top-input" type="text" />
          <button class="search-btn">搜狗搜索</button>
        </div>
        <!-- 其他按钮：分享、登录等 -->
        <div class="top-login">
          <div class="items">
            <a href="#" class="q-icons l-qzone" target="blank">
              <img class="icon" src="img/搜狗截图20年12月02日1057_3.png" alt="" />
            </a>
            <a href="#" class="q-icons l-qmail" target="blank">
              <img class="icon" src="img/搜狗截图20年12月02日1058_4.png" alt="" />
            </a>
            <a href="#" class="q-icons l-qlo" target="blank">
              <button class="login-btn">登录</button>
            </a>
          </div>
        </div>
      </div>
      <!-- 导航条 -->
      <div class="nav">
        <a href="#">新闻</a>
        <a href="#">视频</a>
        <a href="#">图片</a>
        <a href="#">军事</a>
        <a href="#">体育</a>
        <a href="#">NBA</a>
        <a href="#">娱乐</a>
        <a href="#">财经</a>
        <a href="#">科技</a>
        <a href="#">时尚</a>
        <a href="#">汽车</a>
        <a href="#">房产</a>
        <a href="#">教育</a>
        <a href="#">文化</a>
        <a href="#">星座</a>
        <a href="#">游戏</a>
        <a href="#"
          >更多
          <img class="bottom" src="img/搜狗截图20年12月01日2107_1.png"security">
        <img class="txsecurity" src="img/搜狗截图20年12月02日1056_2.png"" />
      </div>

      <!-- 新闻列表 -->
      <div class="news clear">
        <div class="left col-1">
          左边新闻
          <div class="news-title">
            <div class="hd">
              <h2 class="tit-1">
                <a href="#">要闻</a>
              </h2>
              <span class="tit-line"></span>
              <h2 class="tit">
                <a href="#">抗肺炎</a>
              </h2>
              <span class="tit-line"></span>
              <h2 class="tit">
                <a href="#">陕西新闻</a>
              </h2>
              <h2 class="tit-2">西安</h2>
              <img class="weather" src="img/搜狗截图20年12月02日1337_5.png" alt="" />
              <p class="txt">2℃</p>
            </div>
            <div class="bd">
              <div class="tab-news">
                <ul class="news-top">
                  <li class="bold">
                    <a href="#"
                      >在总书记心中这个冷门有重大社会政治意义
</a>
                    
                  </li>
                  <li class="bold">
                    <a href="#"
                      >习近平总书记“考古公开课”的15个要点</a
                    >
                  </li>
                  <li class="">
                    <a href="#"
                      >【实践新论】科学推进大气污染治理生态补偿机制</a
                    >
                  </li>
                  <li class="">
                    <a href="#"
                      >国际劳工组织总干事：中国为全球脱贫事业树立榜样</a
                    >
                  </li>
                  <li class="">
                    <a href="#">塔克拉玛干腹地矗起“沙漠新村” </a>
                  </li>
                  <li class="">
                    <a href="#"
                      >美司法部长：未发现证据显示2020总统大选存在大规模舞弊</a
                    >
                  </li>
                  <li class="">
                    <a href="#">拜登足部骨裂后首次公开露面：脚穿专用步行靴，“感觉不错”</a>
                  </li>
                  <li class="">
                    <a href="#"
                      >伊朗重要人物屡次遇刺意味着什么？战争新形态？</a
                    >
                  </li>
                  <li class="">
                    <a href="#"
                      >“嫦五”落月 为何只拟获取2公斤样品带回地球？
嫦娥五号成功落月：将开启2天“挖土”之旅 获取2公斤</a
                    >
                  </li>
                  <li class="news-pic-txt cf">
                    <img
                      style="
                        width: 188px;
                        height: 106px;
                        float: left;
                        border-radius: 5px;
                      "
                      src="./img/news1.webp"
                      alt=""
                    />
                    <div class="text fl f14">
                      <a href="#">哈佛大学荣休教授傅高义：中美关系面临新机会 美国应承认中国对世界的贡献</a>
                    </div>
                  </li>
                  <li class="">
                    <a href="#">让我们一起“加油”吧！年内油价最大幅上涨将至</a>
                  </li>
                  <li class="">
                    <a href="#">北京密云推动绿水青山向金山银山转化</a>
                  </li>
                  <li class="">
                    <a href="#"
                      >北京密云推动绿水青山向金山银山转化</a
                    >
                  </li>
                  <li class="">
                    <a href="#">美国新冠肺炎确诊病例超783万例</a>
                  </li>
                  <li class="">
                    <a href="#">网络调查：您对当下网络诚信状况满意吗？</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="middle col-2">
          中间新闻
          <div class="today-topic">
            <div class="hd">
              <h2 class="tit-1">
                <a href="#">今日话题</a>
              </h2>
            </div>
            <div class="bd">
              <ul class="tab-news">
                <li class="bold">
                  <a href="#">百年梦圆！今天，“马首”回归圆明园</a>
                </li>
                <li class="">
                  <a class="bold" href="#">侠客岛</a>
                  <span class="tit-line"></span>
                  <a href="#">冷！西北华北降雪增多，南方多地大范围阴雨</a>
                </li>
                <li class="">
                  <a class="bold" href="#">中新</a>
                  <span class="tit-line"></span>
                  <a href="#">“万元大牌百元卖”：“外贸村”不是假货横行之地｜新京报快评</a>
                </li>
                <li class="">
                  <a class="bold" href="#">深网</a>
                  <span class="tit-line"></span>
                  <a href="#">扎心！2.5亿中国人被这件事困扰</a>
                </li>
                <li class="">
                  <a class="bold" href="#">新闻哥</a>
                  <span class="tit-line"></span>
                  <a href="#">深网｜颜值即正义？丁真能火，靠的不仅仅是颜值</a>
                </li>
                <li class="">
                  <a class="bold" href="#">较真</a>
                  <span class="tit-line"></span>
                  <a href="#">棱镜｜荣耀剥离进行时：网传“1.7倍赔偿”没了 但多了华为股票</a>
                </li>
                <li class="">
                  <a class="bold" href="#">棱镜</a>
                  <span class="tit-line"></span>
                  <a href="#">流感疫苗副作用大不能接种？腾讯新闻较真平台发布11月最全辟谣榜</a>
                </li>
              </ul>
              <div class="mod">
                <div class="invite" style="height: 50px">
                  <img class="talk" src="./img/talk_with.png" alt="" />
                </div>
                <li class="news-pic-txt-2 cf">
                  <img
                    style="
                      width: 188px;
                      height: 106px;
                      float: left;
                      border-radius: 5px;
                    "
                    src="./img/2.jpg"
                    alt=""
                  />
                  <div class="text fl f14">
                    <a href="#"
                      >陌生人丨这个宠物医生自称“疯子”
                      喊话宠主：你们别想在我这里找安慰
                    </a>
                  </div>
                </li>
                <li class="kandian-1 f14 kandian-top">
                  <a href="#"
                    >[看点]中国保健品巨头企业周末不休息：实行7X24工作制</a
                  >
                </li>
                <li class="kandian-1 f14">
                  <a href="#"
                    >[看点]中国保健品巨头把药片卖到全世界 将来想跨行做中药</a
                  >
                </li>
                <li class="f14">
                  <img class="play" src="./img/play.png" alt="" />
                  <a href="#">时光复原师</a>
                  <span class="tit-line"></span>
                  <a href="#">这种神秘乐器一度失传，聆听一曲梦回盛唐</a>
                </li>
                <li class="f14">
                  <img class="play" src="./img/play.png" alt="" />
                  <a href="#">案中观察</a>
                  <span class="tit-line"></span>
                  <a href="#">配阴婚是合法的吗？揭秘阴婚背后的利益链条</a>
                </li>
                <li class="f14">
                  <img class="play" src="./img/play.png" alt="" />
                  <a href="#">眼界TALK</a>
                  <span class="tit-line"></span>
                  <a href="#">年轻人如何做那些最难的选择：不买房行不行？</a>
                </li>
              </div>
            </div>
          </div>
        </div>
        <div class="right col-3">
          右边新闻
          <div class="product">
            <ul class="list f14 fl">
              <li class="q-icons prod-1">
                <a href="#">新闻APP</a>
                <a href="#">体育APP</a>
                <a href="#">企鹅号</a>
                <a href="#">快报</a>
                <a href="#">视频</a>
                <a href="#">浏览器</a>
                <a href="#">微视</a>
              </li>
              <li class="q-icons prod-2">
                <a href="#">微信</a>
                <a href="#">QQ</a>
                <a href="#">空间</a>
                <a href="#">企业微信</a>
                <a href="#">邮箱</a>
                <a href="#">腾讯云</a>
                <a href="#">电脑管家</a>
                <a href="#">会员</a>
              </li>
              <li class="q-icons prod-3">
                <a href="#">LOL</a>
                <a href="#">DNF</a>
                <a href="#">CF</a>
                <a href="#">王者</a>
                <a href="#">单机游戏</a>
                <a href="#">火影OL</a>
                <a href="#">天刀</a>
                <a href="#">爱玩</a>
                <a href="#">逆战</a>
              </li>
              <li class="q-icons prod-4">
                <a href="#">软件</a>
                <a href="#">Q币</a>
                <a href="#">京东</a>
                <a href="#">腾讯地图</a>
                <a href="#">腾讯文档</a>
                <a href="#">理财通</a>
              </li>
            </ul>
          </div>
          <div class="hot-race">
            <div class="hd-hot">
              <h2 class="tit-1 fl">
                <a href="#">热门赛事</a>
                <div class="fr">
                  <span class="time">10月14日</span>
                  <span class="tit-line"></span>
                  <span class="tips">晚上好，今天有24场热门比赛 &nbsp;》</span>
                </div>
              </h2>
            </div>
            <div class="bd">
              <ul class="news-list">
                <li class="video-box">
                  <img class="poster" src="./img/poster.jpg" alt="" />
                  <!-- <a class="poster-txt" href="#"
                    >詹姆斯第四冠微纪录片《光荣之路》 紫金生涯新的里程碑</a
                  > -->
                </li>
                <li class="title-1 f14">
                  <img class="play" src="./img/play.png" alt="" />
                  <a href="#">欧冠-皇马0-2遭矿工双杀出线堪忧 飞翼中柱 以色列新星半场奔袭破门</a>
                </li>
                <li class="f14">
                  <img class="play" src="./img/play.png" alt="" />
                  <a href="#"
                    >欧冠-利物浦1-0霸气双杀阿贾克斯，19岁小将一锤定音，提前1轮出线</a
                  >
                </li>
                <li class="f14">
                  <img class="play" src="./img/play.png" alt="" />
                  <a href="#"
                    >官宣！C罗荣获2020年金足奖！击败梅西内马尔莱万等9大巨星当选</a
                  >
                </li>
                <li class="f14">
                  <img class="play" src="./img/play.png" alt="" />
                  <a href="#"
                    >勇士再遭重创！两名球员确诊新冠，总经理：球队合练时间推迟</a
                  >
                </li>
                <li class="f14">
                  <img class="play" src="./img/play.png" alt="" />
                  <a href="#"
                    >《NBA年终大战赛程出炉：湖人对阵独行侠 雄鹿战勇士</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
		
	</body>
</html>

<style>
	/* 公共样式 */
/* common */
/* 清除浮动对元素的影响 */
.clear::after {
  content: "";
  clear: both;
  display: block;
}
ul,
li {
  list-style: none;
  padding-left: 0;
}
li,
p {
  line-height: 35px;
}
a {
  color: #333;
}
a,
button,
input {
  text-decoration: none;
}
input:hover {
  text-decoration: none;
}
input,
button:focus {
  text-decoration: none;
}
h2 {
  font-weight: normal;
}

/* 整个页面的样式 */
.page {
  width: 90%;
  height: 90%;
  margin: 0 auto;
}

/* 头部的logo和搜索 */
.header {
  width: 99%;
  height: 80px;
}

.txlogo {
  float: left;
}
.top_logo {
  padding-top: 20px;
  width: 131px;
  height: 35px;
  float: left;
}
.search {
  float: left;
  position: absolute;
  height: 36px;
  line-height: 32px;
  margin: 19px 0 0 392px;
  border: 1px solid #dfdfdf;
  background-color: #f3f6f8;
  border-radius: 50px;
}

.web {
  float: left;
  color: #404040;
  padding-left: 20px;
  font-size: 14px;
  line-height: 37px;
}
.top-input {
  float: left;
  border: 0;
  font-size: 14px;
  line-height: 32px;
  width: 380px;
  height: 30px;
  padding: 4px 15px;
  background: none;
  outline: none;
  vertical-align: middle;
}
/* 搜索按钮 */
.search-btn {
  position: relative;
  top: -1px;
  right: -1px;
  background: none;
  border: none;
  height: 38px;
  width: 126px;
  line-height: 34px;
  padding: 0 23px;
  color: #fff;
  background-color: #1479d7;
  border-radius: 50px;
  font-size: 16px;
}

.top-login {
  float: right;
  margin: 22px 0 0;
}
/* 图标 */
.icon {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  padding: 2px;
}
/* 登录按钮 */
.login-btn {
  display: inline-block;
  width: 47px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #ededed;
  color: #60a5e4;
  background-color: #f5f5f5;
  font-size: 14px;
  margin-left: 8px;
}

/* 导航条 */
.nav {
  width: 99%;
  height: 50px;
  background-color: #1479d7;
  line-height: 50px;
  text-align: center;
  font-size: 1px;
  border-radius: 3px;
}
.nav a {
  display: inline-block;
  height: 50px;
  font-size: 18px;
  padding: 0 15px;
  color: #fff;
  text-decoration: none;
}
.nav a:hover {
  background-color: #cbe1ed;
  color: #14539a;
  text-align: center;
}

/* 下拉箭头样式 */
.bottom {
  height: 12px;
  width: 12px;
  color: #dfdfdf;
}

/* 腾讯安全部分 */
.security {
  margin: 20px 0;
  margin-left: 826px;
  /* display: inline-block; */
}
.txsecurity {
  width: 426px;
  height: 75px;
}

/* 新闻列表样式 */

.col {
  color: #222;
}
.col-1 {
  width: 385px;
  margin-right: 40px;
  float: left;
}
.col-2 {
  width: 361px;
  margin-right: 40px;
  float: left;
}
.col-3 {
  width: 400px;
  margin-right: 40px;
  float: right;
}

.fl {
  float: left;
}
.news {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
/* .left,
.middle,
.right {
  display: inline-block;
} */

.left {
}
.hd {
  height: 70px;
  line-height: 40px;
  border-bottom: 1px solid #cae0f3;
}
.tit {
  display: inline-block;
  margin: 0 10px;
  height: 40px;
  font-size: 20px;
}
.tit-1 {
  display: inline-block;
  margin: 22px 10px 0 0;
  height: 40px;
  font-size: 20px;
}
.tit-2 {
  display: inline-block;
  margin: 0px 5px 0 9px;
  height: 40px;
  font-size: 12px;
}
.weather {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: -7px 0 0;
  background-size: 100%;
  vertical-align: middle;
}
.txt {
  display: inline-block;
  margin: 0 10px 0 0;
  font-size: 12px;
}

/* 标题分割线 */
.tit-line {
  display: inline-block;
  width: 2px;
  height: 18px;
  border-left: 1.5px solid #e1e1e1;
  margin: 10px 0 0 0;
}

/* 新闻内容 */
.tab-news {
  font-size: 15px;
  margin-bottom: 0;
}
.bold {
  font-weight: bold;
}
/* 图文混排 */
.cf {
  height: 105px;
}
.news-pic-txt {
  padding: 32px 0;
  border-radius: 2px;
}
.news-pic-txt-2 {
  padding: 0;
}

.text {
  margin-left: 13px;
  position: relative;
  width: 157px;
  height: 107px;
  line-height: 30px;
}
.talk {
  width: 128px;
  height: 50px;
}

.kandian-top {
  margin-top: 23px;
}
.play {
  width: 23px;
  height: 12px;
}

/* 右边新闻 */
/* 产品列表 */
.product {
  margin: 8px 0 14px;
}
.list {
  margin-top: 24px;
  border: 1px solid #cae0f3;
  /* border-left: none; */
}
.f14 {
  font-size: 13px;
}

.product .list li {
  height: 35px;
  line-height: 40px;
  /* padding-left: 12px; */
  border-bottom: 1px solid #cae0f3;
  overflow: hidden;
}
.product .list li a {
  font-size: 12px;
  margin: 5px 8px 0 0;
  padding-left: 8px;
}
.prod-1,
.prod-3 {
  background-color: #fff;
  width: 425px;
}
.prod-2,
.prod-4 {
  background-color: #f5f8fc;
  width: 425px;
}

/* 热门赛事部分 */
.hot-race {
}
.hd-hot {
  height: 43px;
  width: 428px;
  line-height: 40px;
  border-bottom: 1px solid #cae0f3;
}
.fr {
  float: right;
  width: 303px;
}
.time {
  padding-left: 20px;
  font-size: 14px;
  line-height: 45px;
}
.tips {
  color: #64788c;
  font-size: 14px;
  /* padding-left: 44px; */
}

.video-box {
  margin-top: 163px;
  height: 220px;
}
.poster {
  /* position: absolute; */
  margin-top: 23px;
  border-radius: 4px;
  height: 255px;
  width: 428px;
}
.poster-txt {
  position: relative;
  left: 0;
  bottom: 0;
  padding: 10px 0 10px 15px;
  box-sizing: border-box;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

.title-1 {
  padding-top: 119px;
}
	
</style>
